<nz-card>
  <p class="goods-label-title">
    <i nz-icon nzType="subnode" nzTheme="outline" class="t-icon"></i>
    基本信息
  </p>

  <nz-form-item>
    <nz-form-label [nzFlex]="formLabelWidth" nzRequired>类型</nz-form-label>
    <nz-form-control nzFlex="auto">
      <nz-radio-group nzDisabled [(ngModel)]="formParams.type">
        <label nz-radio [nzValue]="1">自定义</label>
        <label nz-radio [nzValue]="2">优惠券</label>
        <label nz-radio [nzValue]="3">直降促销</label>
      </nz-radio-group>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item *ngIf="formParams.businessId">
    <nz-form-label [nzFlex]="formLabelWidth">关联ID</nz-form-label>
    <nz-form-control nzFlex="auto">
      {{ formParams.businessId || '-' }}
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzFlex]="formLabelWidth" nzRequired>权重</nz-form-label>
    <nz-form-control nzFlex="auto">
      <nz-input-number
        style="width: 200px;"
        [nzStep]="1"
        [nzPrecision]="0"
        nzPlaceHolder="请输入"
        [nzDisabled]="setDisabled()"
        [(ngModel)]="formParams.weight"
      ></nz-input-number>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzFlex]="formLabelWidth" nzRequired>标题</nz-form-label>
    <nz-form-control nzFlex="400px">
      <input
        nz-input
        maxlength="50"
        placeholder="请输入标题"
        [disabled]="setDisabled()"
        [(ngModel)]="formParams.name"
      />
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzFlex]="formLabelWidth">备注</nz-form-label>
    <nz-form-control nzFlex="400px">
      <nz-textarea-count [nzMaxCharacterCount]="100">
        <textarea
          rows="4"
          nz-input
          maxlength="100"
          placeholder="仅内部可见"
          [disabled]="setDisabled()"
          [(ngModel)]="formParams.remark"
        ></textarea>
      </nz-textarea-count>
    </nz-form-control>
  </nz-form-item>

  <nz-divider></nz-divider>

  <p class="goods-label-title">
    <i nz-icon nzType="subnode" nzTheme="outline" class="t-icon"></i>
    样式设置
  </p>

  <nz-form-item>
    <nz-form-label [nzFlex]="formLabelWidth" nzRequired>样式</nz-form-label>
    <nz-form-control nzFlex="400px">
      <nz-select
        nzShowSearch
        nzAllowClear
        nzPlaceHolder="请选择样式"
        [nzDisabled]="setDisabled()"
        [(ngModel)]="formParams.styleTag"
        (ngModelChange)="styleChange($event)">
        <nz-option
          *ngFor="let option of goodsStyleOptions"
          [nzLabel]="option.name"
          [nzValue]="option.content"
        ></nz-option>
      </nz-select>

      <p
        style="color: #F56C6C;"
        [hidden]="!goodsStyleTips"
        class="p-t-5">
        {{ goodsStyleTips }}
      </p>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzFlex]="formLabelWidth">参数</nz-form-label>
    <nz-form-control nzFlex="400px">
      <input
        nz-input
        placeholder="多个参数请用@分隔"
        [disabled]="setDisabled()"
        [(ngModel)]="formParams.params"
      />
    </nz-form-control>
  </nz-form-item>

  <nz-divider></nz-divider>

  <p class="goods-label-title">
    <i nz-icon nzType="subnode" nzTheme="outline" class="t-icon"></i>
    适用范围
  </p>

  <nz-form-item>
    <nz-form-label [nzFlex]="formLabelWidth" nzRequired>状态</nz-form-label>
    <nz-form-control nzFlex="400px">
      <nz-radio-group
        [nzDisabled]="setDisabled('special')"
        [(ngModel)]="formParams.status">
        <label nz-radio [nzValue]="1">启用</label>
        <label nz-radio [nzValue]="2">禁用</label>
      </nz-radio-group>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzFlex]="formLabelWidth" nzRequired>生效时间</nz-form-label>
    <nz-form-control nzFlex="400px">
      <nz-range-picker
        [nzShowTime]="true"
        [nzShowTime]="{ nzFormat: 'HH:mm' }"
        nzFormat="yyyy-MM-dd HH:mm"
        [(ngModel)]="takeEffectDates"
        [nzDisabled]="setDisabled('special')"
        (ngModelChange)="dateChange($event, ['getBeginTime', 'getEndTime'])"
      ></nz-range-picker>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzFlex]="formLabelWidth" nzRequired>适用用户</nz-form-label>
    <nz-form-control nzFlex="400px">
      <nz-radio-group
        [nzDisabled]="setDisabled('special')"
        [(ngModel)]="formParams.userType">
        <label nz-radio [nzValue]="0">通用</label>
        <label nz-radio [nzValue]="1">C端</label>
        <label nz-radio [nzValue]="2">B端</label>
      </nz-radio-group>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzFlex]="formLabelWidth" nzRequired>适用场景</nz-form-label>
    <nz-form-control nzFlex="400px">
      <zdy-checkbox-group
        *ngIf="sceneOptions.length"
        [checkOptions]="sceneOptions"
        [checkKeys]="{
          key: 'value',
          label: 'label'
        }"
        [isAllCheck]="false"
        [(ngModel)]="sceneSelected"
      ></zdy-checkbox-group>
    </nz-form-control>
  </nz-form-item>

  <nz-divider></nz-divider>

  <p class="goods-label-title">
    <i nz-icon nzType="subnode" nzTheme="outline" class="t-icon"></i>
    适用商品
    <span class="title-tip">（默认所有商品都不可用，请在下方添加可用的内容）</span>
  </p>

  <div class="item-control">
    <nz-form-item>
      <nz-form-label nzFlex="120px">指定机型</nz-form-label>
      <nz-form-control nzFlex="400px">
        <p class="appoint-model">
          <label
            nz-radio
            [(ngModel)]="modelAll"
            [nzDisabled]="setDisabled('special')"
            (ngModelChange)="modelOwnerAllChange($event, 1)"
          >全选</label>

          <button
            nz-button
            nzType="link"
            nzSize="small"
            nzDanger
            (click)="modelOwnerNotAllChange(1)"
          >全不选</button>
        </p>
        <div class="p-t-6">
          已选
          <b *ngIf="modelAll;else templateAll">
            全部
          </b>
          <ng-template #templateAll>
            <b>{{ defaultModelKeys.length || 0 }}</b> 个
          </ng-template>
          内容
          
          <button
            nz-button
            nzType="link"
            [disabled]="setDisabled('special')"
            (click)="selectMoreModel()"
          >选择更多</button>

          <!-- select-tree -->
          <model-select-tree
            [(ngModel)]="isModelVisible"
            [defaultKeys]="defaultModelKeys"
            (onSubmit)="subModelTree($event)"
          ></model-select-tree>
        </div>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label nzFlex="120px">货主</nz-form-label>
      <nz-form-control nzFlex="400px">
        <p class="p-b-10">
          <label
            nz-radio
            [(ngModel)]="supplierAll"
            [nzDisabled]="setDisabled('special')"
            (ngModelChange)="modelOwnerAllChange($event, 2)"
          >全选</label>

          <button
            nz-button
            nzType="link"
            nzSize="small"
            nzDanger
            (click)="modelOwnerNotAllChange(2)"
          >全不选</button>
        </p>

        <nz-select
          nzShowSearch
          nzAllowClear
          [nzMaxTagCount]="1"
          nzMode="multiple"
          nzPlaceHolder="请选择货主"
          [(ngModel)]="supplierSelected"
          [nzDisabled]="setDisabled('special')"
          (ngModelChange)="supplierChange($event)"
        >
          <nz-option
            *ngFor="let option of supplierOptions"
            [nzLabel]="option.name"
            [nzValue]="option.id"
          ></nz-option>
        </nz-select>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label nzFlex="120px">指定B端成色</nz-form-label>
      <nz-form-control nzFlex="400px">
        <zdy-checkbox-group
          *ngIf="conditionOptionsB.length"
          [checkOptions]="conditionOptionsB"
          [checkKeys]="{
            key: 'id',
            label: 'name'
          }"
          [(ngModel)]="selectConditionB"
          [disabled]="setDisabled('special')"
        ></zdy-checkbox-group>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label nzFlex="120px">指定C端成色</nz-form-label>
      <nz-form-control nzFlex="400px">
        <zdy-checkbox-group
          *ngIf="conditionOptionsC.length"
          [checkOptions]="conditionOptionsC"
          [checkKeys]="{
            key: 'id',
            label: 'name'
          }"
          [(ngModel)]="selectConditionC"
          [disabled]="setDisabled('special')"
        ></zdy-checkbox-group>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label nzFlex="120px">排除可用商品</nz-form-label>
      <nz-form-control nzFlex="400px">
        已选 <b style="color: #ff4d4f;">{{ excludeGoodsIds?.length || '0' }}</b> 个商品
        <button
          nz-button
          nzType="link"
          [disabled]="!excludeGoodsIds.length"
          (click)="previewModal(1)"
        >点击查看</button>

        <button
          nz-button
          nzType="link"
          [disabled]="setDisabled('special')"
          (click)="showSelectGoods(1)"
        >选择更多</button>

        <i
          nz-icon
          nzType="exclamation-circle"
          nzTheme="outline"
          class="m-l-10"
          nz-tooltip
          nzTooltipTitle="可以在指定机型和货主之内，去掉部分商品不参予优惠"
        ></i>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label nzFlex="120px">追加可用商品</nz-form-label>
      <nz-form-control nzFlex="400px">
        已选 <b style="color: #ff4d4f;">{{ addGoodsIds?.length || '0' }}</b> 个商品
        <button
          nz-button
          nzType="link"
          (click)="previewModal(2)"
          [disabled]="!addGoodsIds?.length"
        >点击查看</button>

        <button
          nz-button
          nzType="link"
          [disabled]="setDisabled('special')"
          (click)="showSelectGoods(2)"
        >选择更多</button>

        <i
          nz-icon
          nzType="exclamation-circle"
          nzTheme="outline"
          class="m-l-10"
          nz-tooltip
          nzTooltipTitle="可以在指定机型和货主之外，再指定部分商品参予优惠"
        ></i>
      </nz-form-control>
    </nz-form-item>

    <!-- <nz-form-item>
      <nz-form-label nzFlex="120px">状态</nz-form-label>
      <nz-form-control nzFlex="400px">
        <nz-badge
          [nzStatus]="[3, 4].includes(formParams.status) ? 'error' : [2].includes(formParams.status) ? 'success' : 'default'"
          [nzText]="formParams.status | sencondCouponStatus: 'label'"
        ></nz-badge>
      </nz-form-control>
    </nz-form-item> -->
  </div>
</nz-card>

<nz-card class="m-t-4">
  <div nz-row nzJustify="center">
    <button
      *ngIf="permission.userPermission.has('secondGoods:label:preserve')"
      nz-button
      nzType="primary"
      class="m-r-10"
      (click)="submitForm()"
    >保存</button>

    <button
      nz-button
      nzType="default"
      (click)="back()"
    >返回</button>
  </div>
</nz-card>

<!-- S 选择指定 Modal -->
<goods-select-modal
  [(ngModel)]="isGoodsVisible"
  [tickOptions]="modelGoodOptions"
  [disabledOptions]="disabledOptions"
  (subOptions)="submitSelectGoods($event)"
></goods-select-modal>
<!-- S 选择指定 Modal -->

<!-- S 已选查看 -->
<goods-preview-modal
  [(ngModel)]="isPreviewVisible"
  [tableDatas]="previewTable"
  [previewIds]="previewGoodIds"
  [disable]="setDisabled('special')"
  (dataChange)="addExcludeChange($event)"
></goods-preview-modal>
<!-- E 已选查看 -->